<template>
    <div class="w-full h-full relative flex" @click.capture="context.flag = false">
        <Context />
        <div class="relative documentContainer">
            <TopicDetailTop />

            <TopicMain />
            <Hr />
            <div class="flex mt-3 md:ml-24 lg:ml-36 xl:ml-48 2xl:mx-96 mx-4">
                <div class="text-gray-700 text-sm">有帮助？</div>
                <button
                    @click="feedback"
                    class="hover:bg-link hover:text-white border rounded px-8 text-xs border-link text-link mx-1"
                >是</button>
                <button
                    @click="feedback"
                    class="hover:bg-link hover:text-white border rounded px-8 text-xs border-link text-link mx-1"
                >否</button>
            </div>

            <Hr />
            <PageNavi />
            <MyFooter
                :breadCurb="'> 文档 > ' + state.topicDoc.classify + ' > ' + state.topicDoc.title"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import TopicDetailTop from "@comps/topicDetailTop.vue";
import TopicMain from "@comps/topicMain.vue";
import MyFooter from '@comps/footer.vue'
import Context from '@comps/context.vue'
import Hr from '@comps/smallComs/hr.vue'
import PageNavi from '@comps/smallComs/pageNavi.vue'
import { useRoute } from "vue-router";
import { context, params, state } from "@utils/store";
import { watch, onMounted } from "vue";
import { documentData } from "@utils/utils";
const route = useRoute()

documentData(route.path)


onMounted(() => {
    params.id = route.params.id as string
    params.topic = route.params.topic as string
})


watch(route, () => {
    console.log('父组件观察到route被改变')
    params.id = route.params.id as string
    params.topic = route.params.topic as string
    documentData(route.path)

})


const feedback = () => {
    alert('谢谢反馈！')
}
</script>

<style lang="scss" scoped>
.documentContainer {
    width: 100vw;
    left: -5px;
}
</style>